<template>
    <div class="card-container">
        <!-- 名片主体卡片 -->
        <el-card v-for="(role, index) in roleList" :key="index" class="personal-card" shadow="hover">
            <!-- 头像和基本信息区域 -->
            <div class="header-section">

                <img class="avatar" style="width: 100px;border-radius: 50%;" :src="role.iconimage" alt="个人头像" />
                <div class="basic-info">
                    <h1 class="name">{{ role.appaccount }}</h1>
                    <p class="title">{{ role.rolename }}</p>
                    <p class="company">{{ role.name }}</p>
                </div>
            </div>
            <!-- 分割线 -->
            <el-divider />
            <div class="desc-section">
                <p class="desc-content">{{ role.desc }}</p>
            </div>
            <!-- 底部按钮 -->
            <div class="action-buttons">

                <el-button type="success" @click="openNewTabWithPost(role)">
                    <el-icon>
                        <Position />
                    </el-icon> 登陆
                </el-button>
            </div>
        </el-card>
        <div v-if="roleList.length === 0" style="margin: 0 auto;font-size: 100px;">没有应用</div>
        <!-- 隐藏的POST表单（用于打开新标签页提交） -->
        <form ref="postForm" method="post" target="_blank" style="display: none;">
            <!-- 动态添加的表单数据字段 -->
        </form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { index } from '/@/api/backend/myapp'
import {
    Position

} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const postForm = ref(null)
const roleList = ref([])
index().then((res) => {
    roleList.value = res.data
})
// 个人信息数据
// const name = "张明"
// const title = "前端开发工程师"
// const company = "科技创新有限公司"

// const avatarUrl = "https://picsum.photos/id/64/200/200"

// // 个人简介
// const desc = "5年前端开发经验，专注于Vue/React技术栈，擅长构建响应式网站和单页应用。热衷于用户体验优化和前端工程化，追求高效、可维护的代码风格。"



const openNewTabWithPost = (role) => {
    if (role.type == 1) {
        // 设置POST请求的目标URL（替换为实际接口地址）
        postForm.value.action = role.loginurl

        // 清空表单原有字段（避免重复提交）
        while (postForm.value.firstChild) {
            postForm.value.removeChild(postForm.value.firstChild)
        }

        // 动态添加POST数据（根据接口需求定义字段）
        const formData = {
            [role.accountfield]: role.appaccount,
            [role.passwordfield]: role.apppassword,

        }
        const otherData = role.otherparam ? JSON.parse(role.otherparam) : {}

        for (const key in otherData) {
            for (const subKey in otherData[key]) {
                formData[subKey] = otherData[key][subKey]
            }
        }
        console.log(formData)

        // 生成表单input元素
        Object.entries(formData).forEach(([key, value]) => {
            const input = document.createElement('input')
            input.type = 'hidden'
            input.name = key
            input.value = value
            postForm.value.appendChild(input)
        })

        // 提交表单（自动打开新标签页）
        postForm.value.submit()
    } else {
        // 1. 定义 GET 请求的目标 URL 和参数
        const baseUrl = role.loginurl  // 后端接口地址
        // 2. 拼接 GET 参数（使用 URLSearchParams 自动处理编码）
        const params = new URLSearchParams()
        params.append(role.accountfield, role.appaccount)  // 添加参数：用户 ID
        params.append(role.passwordfield, role.apppassword)  // 添加参数：用户名（自动编码特殊字符）
        const otherData = role.otherparam ? JSON.parse(role.otherparam) : {}
        for (const key in otherData) {
            for (const subKey in otherData[key]) {
                params.append(subKey, otherData[key][subKey])  // 添加参数：用户名（自动编码特殊字符）
            }
        }
        const fullUrl = `${baseUrl}?${params.toString()}`  // 最终 URL：https://api.example.com/user-detail?id=123&name=张明

        // 3. 打开新标签页，自动发起 GET 请求
        window.open(fullUrl, "_blank")

    }
    ElMessage.success("已在新标签页发送POST请求")
}

</script>

<style scoped>
.card-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* height: 100px; */
    background-color: #f5f7fa;
    padding: 20px;
    flex-wrap: wrap;
    /* 自动换行 */
    gap: 20px;
    /* 卡片间距（横向和纵向） */
}

.personal-card {
    width: 20%;

    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.personal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-section {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    gap: 20px;
}

.avatar {
    border: 4px solid #e6f7ff;
    transition: transform 0.3s ease;
}

.avatar:hover {
    transform: scale(1.05);
}

.basic-info {
    flex: 1;
}

.name {
    margin: 0 0 10px 0;
    color: #1f2329;
    font-size: 24px;
    font-weight: 600;
}

.title {
    margin: 0 0 5px 0;
    color: #4e5969;
    font-size: 16px;
}

.company {
    margin: 0;
    color: #86909c;
    font-size: 14px;
}

.section-title {
    margin: 15px 0 10px 0;
    color: #1f2329;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
}

.contact-items {
    padding: 10px 0;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #4e5969;
}

.contact-icon {
    margin-right: 10px;
    color: #409eff;
    width: 20px;
    height: 20px;
}

.contact-item a {
    color: #409eff;
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

.desc-content {
    color: #4e5969;
    line-height: 1.6;
    padding: 10px 0;
    margin: 0;
    text-align: justify;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.skill-tag {
    cursor: pointer;
    transition: all 0.2s ease;
}

.skill-tag:hover {
    transform: scale(1.05);
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 10px 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .header-section {
        flex-direction: column;
        text-align: center;
        padding: 20px 10px;
    }

    .name {
        font-size: 20px;
    }

    .contact-item {
        flex: 0 0 100%;
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons button {
        width: 100%;
    }
}
</style>
